<template>
  <div id="circleManage">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>

    <div class="table-conBtn">
      <el-button v-permission="'wh:system:circleManage:add'" type="warning" icon="el-icon-plus" @click="addBtn('add')">添加</el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>

    <!--下部table-->
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%" max-height="490" ref="table">
      
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
        </template>
      </el-table-column>

      <el-table-column
        label="圈子名称"
        prop="basicInfo.name"
        show-overflow-tooltip
        width="120"
      ></el-table-column>

      <el-table-column
        label="圈子说明"
        prop="basicInfo.description"
        min-width="80"
      ></el-table-column>

      <el-table-column v-permission="'wh:system:circleManage:status'" label="开启状态" prop="status" width="90">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="ENABLED"
            inactive-value="DISCONTINUED"
            active-color="#1DC8A4"
            @change="changeStatus(scope.row.status, scope.row.id, scope.$index)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="显性标签" prop="tagName" align="center" min-width="140" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <!-- <div style="max-width: 400px;" v-html="getTableLabel(row.basicInfo ? row.basicInfo.recommendTags : [])" slot="content"></div> -->
          <div class="oneLine">
            {{getTableLabel(row.basicInfo ? row.basicInfo.recommendTags : [])}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="隐性标签" prop="tagName" align="center" min-width="140" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <!-- <div style="max-width: 400px;" v-html="getTableLabel(row.invisibilityTags)" slot="content"></div> -->
          <div class="oneLine"> {{ getTableLabel(row.invisibilityTags) }}</div>
        </template>
      </el-table-column>

      <el-table-column label="关联话题" align="center" min-width="140" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span> {{ circleTopicCompute(row) }} </span>
        </template>
      </el-table-column>

      <el-table-column label="圈内帖子数" prop="statisticalData.contentCount" width="100" align="center">
        <template slot-scope="scope">
          <span> {{ scope.row.statisticalData.contentCount }} </span>
        </template>
      </el-table-column>

      <el-table-column label="成员数" prop="statisticalData.joinUserCount" width="80" align="center">
        <template slot-scope="scope">
          <span> {{ scope.row.statisticalData.joinUserCount }}人 </span>
        </template>
      </el-table-column>

      <el-table-column label="圈子成员" width="120">
        <template slot-scope="scope">
          <el-button v-permission="'wh:system:circleManage:checkMember'" type="text" @click="checkMember(scope.row.id)">
            查看成员
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="创建圈子时间" show-overflow-tooltip prop="createDate" width="150"></el-table-column>
      
      <el-table-column label="关联学院" prop="tagName" min-width="150">
        <template slot-scope="{ row }">
          <el-tooltip class="item" effect="dark" placement="top">
            <div style="max-width: 400px;" v-html="getCollege(row.basicInfo ? row.basicInfo.colleges : [])" slot="content"></div>
            <div class="oneLine">
              {{ getCollege(row.basicInfo ? row.basicInfo.colleges : []) }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      
      <el-table-column label="操作员" prop="changeU.trueName" width="80"></el-table-column>

      <el-table-column label="圈子排序" prop="order" width="80" align="center">
        <template slot-scope="scope">
          <span style="color: #416FE2; cursor: pointer;" @click="handleSort(scope.row)"> {{ scope.row.order }} </span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button v-permission="'wh:system:circleManage:edit'" type="text" @click="addBtn('edit', scope.row.id, scope.row)">
            编辑
          </el-button>

          <el-button v-permission="'wh:system:circleManage:check'" type="text" @click="addBtn('check', scope.row.id, scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      :maxLabelNum="maxLength"
      @refresh="refresh"
    ></dialogAddEdit>

    <dialogMember
      v-if="dialogMemberData.isShow"
      :dialog-data="dialogMemberData"
      @refresh="refresh"
    ></dialogMember>

    <dialogSortEdit
      v-if="dialogSortData.isShow"
      :dialog-data="dialogSortData"
      @refresh="refresh"
    >

    </dialogSortEdit>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getSearchList, stopApi, openApi } from '@/api/circle/circleManage'
import { getKeyValue } from '@/api/system/parameter' // 接口
import topSearch from '@component/circle/circleManage/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/circle/circleManage/dialogAddEdit' // 新增弹窗
import dialogMember from '@component/circle/circleManage/dialogMember' // 圈子成员弹窗
import dialogSortEdit from '@component/circle/circleManage/dialogSortEdit' // 圈子排序弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'

export default {
  name: 'manage',
  msg: '圈子管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAddEdit,
    dialogMember,
    dialogSortEdit
  },
  data() {
    return {
      loading: false,
      textLoad: false,
      total: 0,
      tableData: [], // table内容
      pageName: 'circleManage',
      attrList: {}, //属性对象
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      searchChannel: '',
      formInline: {
        // 搜索条件
        circleStatus: '', // 圈子状态
        name: '', // 圈子名称
        sort: '', // 排序
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      dialogData: {
        //新增弹窗
        id: '', // 有id为编辑；无id为新增
        row: {}, //当前行数据
        nameLength: 0, //名称长度
        remarkLength: 0, //备注长度
        desLength: 0, //说明长度
        isShow: false // 默认隐藏
      },
      dialogMemberData: {
        //查看成员弹窗
        id: '', // 有id为编辑
        isShow: false // 默认隐藏
      },
      dialogSortData: {
        // 编辑排序
        id: '', // 有id为编辑
        num: 0,
        isShow: false // 默认隐藏
      },
      maxLength: 10
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    sysNormalDisable('sys_college', 'circleCollege')
    //属性
    this.getAttr()
    //获取圈子名称、备注、说明，长度
    this.getTagNameLength()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    async getAttr() {
      let list = await sysNormalDisable('sys_labels_attribute')
      list.forEach((item) => {
        this.attrList[item.dictValue] = item.dictLabel
      })
    },
    /*获取圈子名称、备注、说明的长度；显性标签个数*/
    getTagNameLength() {
      let _this = this
      // 名称
      let obj = {
        configKey: 'word_limit_for_circle_names'
      }
      getKeyValue(
        obj,
        (response) => {
          _this.dialogData.nameLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
      //备注
      let objRemark = {
        configKey: 'circle_remark_word_limit'
      }
      getKeyValue(
        objRemark,
        (response) => {
          _this.dialogData.remarkLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
      //说明
      let objDes = {
        configKey: 'circles_indicate_word_limits'
      }
      getKeyValue(
        objDes,
        (response) => {
          _this.dialogData.desLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
      //显性标签个数
      let objTags = {
        configKey: 'circle_tags_num'
      }
      getKeyValue(
        objTags,
        (response) => {
          this.maxLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      const params = {}
      // 非空判断，只传有值的字段
      Object.keys(this.formInline).forEach((key) => {
        if (this.formInline[key] !== '') {
          params[key] = this.formInline[key]
        }
      })
      let obj = Object.assign({}, this.searchParams, params)
      delete obj.createTime
      getSearchList(obj, (response) => {
        this.searchChannel = this.formInline.channel
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
      },(response) => {
        this.loading = false
        this.$message.warning(response.message)
      })
    },
    /*列表中，学院*/
    getCollege(ary) {
      let name = []
      let str = ''
      if (ary.length > 0) {
        let _this = this
        ary.forEach((item) => {
          let college = _this.$options.filters.filterName(item, 'circleCollege')
          name.push(college)
        })
        str = name.join('/')
      }
      return str
    },

    /*列表中，标签名称*/
    getTableLabel(Arr = []) {
      let str = ''
      Arr.forEach((item) => {
        let s = `${item.name}-${item.id}，`
        str += s
      })
      str = str.substring(0, str.length - 1)
      return str ? str : '---'
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 创建标签 */
    addBtn(type = '', id = '', row = {}) {
      this.dialogData.type = type
      this.dialogData.id = id
      this.dialogData.row = row
      this.dialogData.isShow = true
    },
    // 状态切换提示
    async changeStatus(status, id, index) {
      if (status === 'DISCONTINUED') {
        // 停用
        this.$confirm(`确定停用圈子吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          stopApi(id,(response) => {
            this.$message.success('操作成功')
            this.searchList()
          },(response) => {
            this.tableData[index].status = 'ENABLED'
            this.$message.warning(response.message)
          })
        }).catch(() => {
          this.tableData[index].status = 'ENABLED'
        })
      } else {

        // 启用
        this.$confirm(`确定启用圈子吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          openApi(id, (response) => {
            this.$message.success('操作成功')
            this.searchList()
          },(response) => {
            this.tableData[index].status = 'DISCONTINUED'
            this.$message.warning(response.message)
          })
        }).catch(() => {
          this.tableData[index].status = 'DISCONTINUED'
        })
      }
    },

    circleTopicCompute(row) {
      if(row.circleTopics.length > 0) {
        return row.circleTopics.map((i) => { return i.topicName }).join()
      } else {
        return '---'
      }
    },

    // 操作排序
    handleSort(row) {
      this.dialogSortData.id = row.id
      this.dialogSortData.num = row.order
      this.dialogSortData.isShow = true
    },

    /*查看成员*/
    checkMember(id) {
      this.dialogMemberData.id = id
      this.dialogMemberData.isShow = true
    },

    /* 新增编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },

    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#circleManage {
  .con-num {
    cursor: pointer;
  }
  .oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
